<template>
  <van-tabbar 
    v-model="active" 
    route
    active-color="#ee0a24"
    inactive-color="#000"
    safe-area-inset-bottom
  >
    <van-tabbar-item replace to="/notes" icon="notes-o">记一记</van-tabbar-item>
    <van-tabbar-item replace to="/moments" icon="friends-o">好友动态</van-tabbar-item>
    <van-tabbar-item replace to="/messages" icon="chat-o">消息</van-tabbar-item>
    <van-tabbar-item replace to="/together" icon="wap-home-o">小天地</van-tabbar-item>
  </van-tabbar>
</template>

<script lang="ts">
import { defineComponent, ref, watch } from 'vue';
import { Tabbar, TabbarItem } from 'vant';
import { useRoute } from 'vue-router';

export default defineComponent({
  name: 'TabBar',
  components: {
    [Tabbar.name]: Tabbar,
    [TabbarItem.name]: TabbarItem,
  },
  setup() {
    const active = ref(0);
    const route = useRoute();

    // 根据路由自动更新active状态
    watch(() => route.path, (path) => {
      const routes = ['/notes', '/moments', '/messages', '/together'];
      active.value = routes.indexOf(path);
    }, { immediate: true });

    return { active };
  },
});
</script>

<style scoped>

.van-tabbar {
  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.08);
  height: 60px;
  background: #fff;
  border-top: 1px solid #f0f0f0;
  transition: all 0.3s ease;
}

.van-tabbar-item {
  transition: all 0.2s ease;
  font-size: 15px;
  color: #b9b6b6;
}

.van-tabbar-item--active {
  color: #cc7c5e !important;
  font-weight: 600;
  background: linear-gradient(180deg, #fff 60%, #ffeaea 100%);
  box-shadow: 0 -2px 8px rgba(238,10,36,0.08);
}

.van-tabbar-item__icon {
  font-size: 24px;
  margin-bottom: 2px;
}

.van-tabbar-item--active .van-tabbar-item__icon {
  font-size: 26px;
}

.van-tabbar-item__text {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.5px;
}

.van-tabbar-item:active {
  opacity: 0.7;
}

@media (max-width: 600px) {
  .van-tabbar {
    height: 56px;
  }
  .van-tabbar-item__icon {
    font-size: 20px;
  }
}
</style>